<template>
    <div class="reswtpw">
        <el-input v-model="useremail" placeholder="请输入邮箱"></el-input>
        <el-input v-model="code" placeholder="请输入验证码">
            <el-button slot="append" :disabled="disable" :class="{ codeGeting:isGeting }" @click="sendCode">{{getCode}}</el-button>
        </el-input>
        <el-input v-model="password" placeholder="请输入新密码" show-password></el-input>
        <el-button @click="submit">完成</el-button>
    </div>
</template>

<script>
    import axios from "../api/axios";
    let $email = axios.create({baseURL: "http://localhost:8081/api", withCredentials: true, timeout: 60000});
    $email.interceptors.request.use((config) => {return config;});
    $email.interceptors.response.use((res) => {return res.data;});

    export default {
        name: "Resetpw",
        data() {
            return {
                useremail: '',
                code: '',
                password: '',
                getCode: '获取验证码',
                isGeting: false,
                count: 60,
                disable: false
            }
        },
        methods: {
            sendCode(){
                var countDown = setInterval(() => {
                    if (this.count < 1) {
                        this.isGeting = false
                        this.disable = false
                        this.getCode = '获取验证码'
                        this.count = 6
                        clearInterval(countDown)
                    } else {
                        this.isGeting = true
                        this.disable = true
                        this.getCode = this.count-- + 's后重发'
                    }
                }, 1000)

                if(this.useremail===''){
                    this.$message.warning("邮箱不能为空");
                }else {
                    $email({
                        url: "/sendCode",
                        method: "post",
                        data: {"useremail": this.useremail},
                    }).then(res => {
                        console.log(res);
                        if(res.code===200){
                            this.$message.success("验证码发送成功");
                        }else {
                            this.$message.warning(res.msg);
                        }
                    });
                }

            },
            submit(){
                if(this.useremail==='' || this.code==='' || this.password===''){
                    this.$message.warning("不能为空");
                }else {
                    this.$axios({
                        url: "/checkCode",
                        method: "post",
                        data: {"useremail": this.useremail,"code":this.code,"password":this.password},
                    }).then(res => {
                        console.log(res);
                        if(res.code===200){
                            this.$message.success("密码已重置，请重新登录");
                            this.$store.commit("REMOVE_TOKEN");
                            this.$router.push("/index/login");
                        }else {
                            this.$message.warning(res.msg);
                        }
                    });
                }
            }
        }
    }
</script>

<style scoped>
    .reswtpw{
        width: 400px;
        height: 300px;
        margin: 300px auto 0;
    }
    .el-input{
        margin-bottom: 10px;
    }

</style>